import React, { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { LocationFill } from "antd-mobile-icons";
import { ResultPage, Card, List, Button } from "antd-mobile";
import Navbar from "../../components/navbar";
import styles from "./css/pay.module.css";
function Index() {
  let loca = useLocation();

  const orderInfo = useMemo(() => loca.state, [loca]);
  console.log(orderInfo.order_info);
  const info = orderInfo.order_info.train;
  const goPay = () => {
    let url = `https://api-ticket.liulongbin.top/order/pay?orderNo=${orderInfo.order_no}&amount=${orderInfo.order_info.total}`;
    window.open(url, "_self");
  };
  return (
    <div className={styles.paybox}>
      <Navbar title="订单详情" />
      <ResultPage status=" " title=" " description=" ">
        <ResultPage.Card style={{ height: "200px", padding: 8 }}>
          <div className={styles.box}>
            <div className={styles.rrow}>
              <span className={styles.date}>{info.startDay}</span>
              <p className={styles.time}>{info.startTime}</p>
              <p>
                {info.startStation}
                <LocationFill color="#15a5c9" />
              </p>
            </div>
            <div className={styles.rrow1}>
              <Button
                fill="outline"
                color="primary"
                size="small"
                shape="rounded"
              >
                经停信息
              </Button>
              <p className={styles.tno}>{info.trainNo}</p>
            </div>
            <div className={styles.rrow}>
              <span className={styles.date}>{info.endDay}</span>
              <p className={styles.time}>{info.endTime}</p>
              <p>
                <LocationFill color="#15a5c9" />
                {info.endStation}
              </p>
            </div>
          </div>
        </ResultPage.Card>
        {/* <Card className={styles.cards}></Card> */}

        <Card style={{ marginTop: 12 }} className={styles.list}>
          <List style={{ "--border-bottom": "none", "--border-top": "none" }}>
            <List.Item>
              <div className={styles.row}>
                <span>订单编号</span>
                <span>{orderInfo.order_no}</span>
              </div>
            </List.Item>
            <List.Item>
              <div className={styles.row}>
                <span>单价票价</span>
                <span>
                  ￥{orderInfo.order_info.price} x {orderInfo.order_info.count}
                  张
                </span>
              </div>
            </List.Item>
            <List.Item>
              <div className={styles.row}>
                <span>订单总计</span>
                <span>￥{orderInfo.order_info.total}</span>
              </div>
            </List.Item>
          </List>
        </Card>
        {orderInfo.order_state === 0 && (
          <div className={styles.btn}>
            <Button block color="warning" shape="rounded" onClick={goPay}>
              去支付
            </Button>
          </div>
        )}
      </ResultPage>
    </div>
  );
}

export default Index;
